<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class 继承</title>
</head>
<body>
    <script>
    // class是通过extends关键字实现继承，还可以通过static关键字定义类的静态方法，
    // 这比ES5的通过修改原型链实现继承，要清晰方便的很多。
    // ES5的继承，实质上是先创建子类的实例对象this，然后再将父类的方法添加到this上面(parent.call(this,name))
    // ES6的继承机制完全不同，实质上是先将父类实例对象的属性和方法，加到this上面(所以必须先调用super方法)，然后再用子类的构造函数修改this。
    // 主要注意的是，class关键字是原型的语法糖，JavaScript继承仍然是基于原型实现的。
    class Person{
        // 调用类的构造函数
        constructor(name,age){
            this.name = name
            this.age = age
        }
        // 定义一般的方法
        showName(){
            console.log("调用父类的方法")
            console.log(this.name,this.age);
        }
    }
    let p1 = new Person("ykk",26)
    console.log(p1)
    // 定义一个子类
    class Student extends Person {
        constructor(name,age,price){
           super(name,age) //通过super调用父类的构造方法
           this.price = price 
        }
        // 在子类定义自身方法
        showName (){
            console.log("调用子类的方法")
            console.log(this.name,this.age,this.price)
        }
    }
    let s1 = new Student("举案齐眉",27,26000)
    console.log(s1)
    s1.showName()
    // 优点：
    // 语法简单易懂操作更方便
    // 缺点：
    // 不是所有浏览器都支持class关键字





    </script>
</body>
</html>